<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>选择标签</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="css/doctor.css" />
		<style type="text/css">
			body,
			html,
			#app {
				height: 100%;
			}
			#app {
				position: relative;
			}
			.van-button--info {
				background-color: #e22e30;
				border-color: #e22e30;
				font-size: 18px;
			}
			.tag {
				width: calc(2.08rem - 8px);
				height: 0.63rem;
				text-align: center;
				margin-bottom: 0.21rem;
				border-radius: 0.08rem;
				color: #666666 !important;
				border-color: #bbbbbb !important;
			}
			.van-tag {
				justify-content: center;
			}
			.active {
				color: #e22e30 !important;
				border-color: #e22e30 !important;
			}
			.edit_doctorinfo {
				position: absolute;
				bottom: 5%;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="id_container">
				<div class="doctor_left_title" style="margin-top: 0">
					<span class="doctor_left_title_border"></span>
					<span class="doctor_left_title_name">擅长治疗：（至少选择一项）</span>
				</div>
				<div
					class="doctor_box_100 doctor_box"
					style="
						padding: 0.31rem 0.21rem;
						width: calc(100% - 0.4rem);
						flex-wrap: wrap;
						justify-content: space-between;
					"
				>
					<van-tag
						v-for="(item,index) in tagList"
						:class="item.selected?'tag active':'tag'"
						plain
						@click="handleClick(index)"
						>{{item.name}}</van-tag
					>
				</div>
				<div class="edit_doctorinfo">
					<van-button v-if="isIdentify" round type="info" block @click="next"
						>下一步</van-button
					>
					<van-button v-else round type="info" block @click="save"
						>保存</van-button
					>
				</div>
			</div>
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../base.js"></script>
	<script src="../common/js/url.min.js"></script>
	<script src="../common/js/rem.js"></script>
	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
		} from '../common/js/api/vue3-axios-utils.js'

		const tag = {
			data() {
				return {
					info: {},
					tagList: [
						{
							name: '内分泌',
							value: 1,
							selected: false,
						},
						{
							name: '代谢',
							value: 2,
							selected: false,
						},
						{
							name: '糖尿病并发症',
							value: 3,
							selected: false,
						},
						{
							name: '预防与筛查',
							value: 4,
							selected: false,
						},
						{
							name: '肥胖症',
							value: 5,
							selected: false,
						},
						{
							name: '减脂',
							value: 6,
							selected: false,
						},
						{
							name: '生活方式干预',
							value: 7,
							selected: false,
						},
						{
							name: '营养',
							value: 8,
							selected: false,
						},
						{
							name: '高血压',
							value: 9,
							selected: false,
						},
						{
							name: '糖尿病教育',
							value: 10,
							selected: false,
						},
					],
				}
			},
			computed: {
				isIdentify() {
					return url('?status') ? true : false
				},
			},
			filters: {
				tagClass(item) {
					return item.selected ? 'tag active' : 'tag'
				},
			},
			created() {
				this.doctorId = url('?id') || ''
				this.info = JSON.parse(sessionStorage.getItem('doctorInfo'))
				this.info.doctorsTag &&
					this.tagList.forEach(v => {
						this.info.doctorsTag.split(',').forEach(n => {
							if (n == v.value) {
								v.selected = true
							}
						})
					})
			},
			methods: {
				handleClick(index) {
					this.tagList[index].selected = !this.tagList[index].selected
					console.log(this.tagList[index])
				},
				save() {
					const selected = this.tagList.filter(v => {
						return v.selected
					})
					this.info.doctorsTag = selected
						.map(v => {
							return v.value
						})
						.join(',')
					if (this.info.doctorsTag.length == 0) {
						vant.Toast('至少选一个标签')
						return
					}
					delete this.info.doctorsTagName
					this.info.doctorsCertificate &&
						(this.info.doctorsCertificate =
							this.info.doctorsCertificate.join(','))
					this.info.doctorsWorkPermits &&
						(this.info.doctorsWorkPermits =
							this.info.doctorsWorkPermits.join(','))
					postAction(spliceUrl('/201/02/2010202'), this.info).then(res => {
						res = res.data
						console.log('save', res)
						if (res.success) {
							this.$toast.success({
								message: '修改成功',
								duration: 300,
								onClose: function () {
									window.location.href =
										'./doctorInfo.html?id=' + localStorage.getItem('did')
								},
							})
						}
					})
				},
				next() {
					const selected = this.tagList.filter(v => {
						return v.selected
					})
					this.info.doctorsTag = selected
						.map(v => {
							return v.value
						})
						.join(',')
					if (this.info.doctorsTag.length == 0) {
						vant.Toast('至少选一个标签')
						return
					}
					sessionStorage.setItem('doctorInfo', JSON.stringify(this.info))
					window.location.href = './identify.html?id=' + this.doctorId
				},
			},
		}

		const app = Vue.createApp(tag)

		app.use(vant)

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount('#app')
	</script>
</html>
